<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta content="IE=8" http-equiv="X-UA-Compatible">
  <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
  <title>点赞与取消点赞特效</title>
  <style type="text/css">
    /*动态点赞开始*/
    .praise {
      width: 40px;
      height: 40px;
      margin: 50px auto;
      cursor: pointer;
      font-size: 12px;
      text-align: center;
      position: relative;
    }

    #praise {
      display: block;
      width: 40px;
      height: 40px;
      margin: 0 auto;
    }

    #praise-txt {
      height: 25px;
      line-height: 25px;
      display: block;
    }

    .praise img {
      width: 40px;
      height: 40px;
      display: block;
      margin: 0 auto;
    }

    .praise img.animation {
      animation: myfirst 0.5s;
      -moz-animation: myfirst 0.5s; /* Firefox */
      -webkit-animation: myfirst 0.5s; /* Safari 和 Chrome */
      -o-animation: myfirst 0.5s; /* Opera */
    }

    #add-num {
      display: none;
    }

    #add-num .add-animation {
      color: #000;
      position: absolute;
      top: -15px;
      left: 10px;
      font-size: 15px;
      opacity: 0;
      filter: Alpha(opacity=0);
      -moz-opacity: 0;
      animation: mypraise 0.5s;
      -moz-animation: mypraise 0.5s; /* Firefox */
      -webkit-animation: mypraise 0.5s; /* Safari 和 Chrome */
      -o-animation: mypraise 0.5s; /* Opera */
      font-style: normal;
    }

    .praise .hover, #add-num .add-animation.hover, #praise-txt.hover {
      color: #EB4F38;
    }

    /*点赞图标放大动画开始*/
    @keyframes myfirst {
      0% {
        width: 40px;
        height: 40px;
      }
      50% {
        width: 50px;
        height: 50px;
      }
      100% {
        width: 40px;
        height: 40px;
      }
    }

    @-moz-keyframes myfirst /* Firefox */
    {
      0% {
        width: 40px;
        height: 40px;
      }
      50% {
        width: 50px;
        height: 50px;
      }
      100% {
        width: 40px;
        height: 40px;
      }
    }

    @-webkit-keyframes myfirst /* Safari 和 Chrome */
    {
      0% {
        width: 40px;
        height: 40px;
      }
      50% {
        width: 50px;
        height: 50px;
      }
      100% {
        width: 40px;
        height: 40px;
      }
    }

    @-o-keyframes myfirst /* Opera */
    {
      0% {
        width: 40px;
        height: 40px;
      }
      50% {
        width: 50px;
        height: 50px;
      }
      100% {
        width: 40px;
        height: 40px;
      }
    }

    /*点赞图标放大动画结束*/
    /*点赞数量加减动画开始*/
    @keyframes mypraise {
      0% {
        top: -15px;
        opacity: 0;
        filter: Alpha(opacity=0);
        -moz-opacity: 0;
      }
      25% {
        top: -20px;
        opacity: 0.5;
        filter: Alpha(opacity=50);
        -moz-opacity: 0.5;
      }
      50% {
        top: -25px;
        opacity: 1;
        filter: Alpha(opacity=100);
        -moz-opacity: 1;
      }
      75% {
        top: -30px;
        opacity: 0.5;
        filter: Alpha(opacity=50);
        -moz-opacity: 0.5;
      }
      100% {
        top: -35px;
        opacity: 0;
        filter: Alpha(opacity=0);
        -moz-opacity: 0;
      }
    }

    @-moz-keyframes mypraise /* Firefox */
    {
      0% {
        top: -15px;
        opacity: 0;
        filter: Alpha(opacity=0);
        -moz-opacity: 0;
      }
      25% {
        top: -20px;
        opacity: 0.5;
        filter: Alpha(opacity=50);
        -moz-opacity: 0.5;
      }
      50% {
        top: -25px;
        opacity: 1;
        filter: Alpha(opacity=100);
        -moz-opacity: 1;
      }
      75% {
        top: -30px;
        opacity: 0.5;
        filter: Alpha(opacity=50);
        -moz-opacity: 0.5;
      }
      100% {
        top: -35px;
        opacity: 0;
        filter: Alpha(opacity=0);
        -moz-opacity: 0;
      }
    }

    @-webkit-keyframes mypraise /* Safari 和 Chrome */
    {
      0% {
        top: -15px;
        opacity: 0;
        filter: Alpha(opacity=0);
        -moz-opacity: 0;
      }
      25% {
        top: -20px;
        opacity: 0.5;
        filter: Alpha(opacity=50);
        -moz-opacity: 0.5;
      }
      50% {
        top: -25px;
        opacity: 1;
        filter: Alpha(opacity=100);
        -moz-opacity: 1;
      }
      75% {
        top: -30px;
        opacity: 0.5;
        filter: Alpha(opacity=50);
        -moz-opacity: 0.5;
      }
      100% {
        top: -35px;
        opacity: 0;
        filter: Alpha(opacity=0);
        -moz-opacity: 0;
      }
    }

    @-o-keyframes mypraise /* Opera */
    {
      0% {
        top: -15px;
        opacity: 0;
        filter: Alpha(opacity=0);
        -moz-opacity: 0;
      }
      25% {
        top: -20px;
        opacity: 0.5;
        filter: Alpha(opacity=50);
        -moz-opacity: 0.5;
      }
      50% {
        top: -25px;
        opacity: 1;
        filter: Alpha(opacity=100);
        -moz-opacity: 1;
      }
      75% {
        top: -30px;
        opacity: 0.5;
        filter: Alpha(opacity=50);
        -moz-opacity: 0.5;
      }
      100% {
        top: -35px;
        opacity: 0;
        filter: Alpha(opacity=0);
        -moz-opacity: 0;
      }
    }

    /*点赞数量加减动画结束*/
    /*动态点赞结束*/
  </style>
</head>

<body>
<div class="praise col-md-12 col-sm-12 col-xs-12">
  <span id="praise"><img id="praise-img" src="/resources/superui/content/superui/global/img/zan.png"/></span>
  <span id="praise-txt">1455</span>
  <span id="add-num"><em>+1</em></span>
</div>
<!--动态点赞结束-->
<script>
    /* @author:Romey
     * 动态点赞
     * 此效果包含css3，部分浏览器不兼容（如：IE10以下的版本）
    */
    $(function () {
        $("#praise").click(function () {
            var praise_img = $("#praise-img");
            var text_box = $("#add-num");
            var praise_txt = $("#praise-txt");
            var num = parseInt(praise_txt.text());
            if (praise_img.attr("src") == ("/resources/superui/content/superui/global/img/yizan.png")) {
                $(this).html("<img src='/resources/superui/content/superui/global/img/zan.png' id='praise-img' class='animation' />");
                praise_txt.removeClass("hover");
                text_box.show().html("<em class='add-animation'>-1</em>");
                $(".add-animation").removeClass("hover");
                num -= 1;
                praise_txt.text(num)
            } else {
                $(this).html("<img src='/resources/superui/content/superui/global/img/yizan.png' id='praise-img' class='animation' />");
                praise_txt.addClass("hover");
                text_box.show().html("<em class='add-animation'>+1</em>");
                $(".add-animation").addClass("hover");
                num += 1;
                praise_txt.text(num)
            }
        });
    })
</script>
</body>
</html>
